<template>
	<div>
		<!-- 头部 -->
		<Header></Header>
		<!-- 主体 -->
		<Main></Main>
		<!-- 底部 -->
		<Footer></Footer>
		<div class="box">
			<ul>
				<li v-for="value in 10" :key="value">
					{{ value }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Header from './Header'
const Main = () => import('./Main')
const Footer = () => import('./Footer')
export default {
	components: {
		Header,
		Main,
		Footer,
	},
}
</script>

<style scoped lang="scss">
/* 
安装css预处理器：scss
npm add -D sass sass-loader@7.x
yarn add -D sass sass-loader@7.x
 */
.box {
	ul {
		list-style: none;
		display: flex;
		flex-wrap: wrap-reverse;
		li {
			align-self: stretch;
		}
	}
}
</style>